<!DOCTYPE html>
<html>
	<head>
		<link rel='icon' type='image/ico' href='../stylesheets/images/favicon.ico' >
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Webble! | IDE</title>
		<!-- css for this page -->
		<link type="text/css" href="../stylesheets/ide.css" rel="stylesheet" />
		<!-- j query stuff from giuse -->
		<link type="text/css" href="../stylesheets/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
		<link rel="stylesheet" href="../libraries/CodeMirror-2.18/lib/codemirror.css">
		<link rel="stylesheet" href="../libraries/CodeMirror-2.18/theme/eclipse.css">
		<link rel="stylesheet" href="../libraries/jquery.treeview/jquery.treeview.css">
		<!-- All the code inside bootScript gets executed when the page is loaded  -->
		<script id="bootScript">
			function loadScript(url, callback) {
				var script = document.createElement("script")
				script.type = "text/javascript";
				if(script.readyState) {//IE
					script.onreadystatechange = function() {
						if(script.readyState == "loaded" || script.readyState == "complete") {
							script.onreadystatechange = null;
							callback();
						}
					};
				} else {//Others
					script.onload = function() {
						if(callback)
							callback();
					}
				}
				script.src = url;
				document.getElementsByTagName("head")[0].appendChild(script);
			}

			loadScript("../libraries/mishoo-UglifyJS-4f97733/lib/parse-js.js", function() {
				loadScript("../libraries/mishoo-UglifyJS-4f97733/lib/process.js")
			})
			
			loadScript("../javascripts/dragManager.js")

			loadScript("../javascripts/bubbleManager.js")
			loadScript("../javascripts/fileManager.js")
			loadScript("../javascripts/model.js")
			loadScript("../javascripts/miscellaneous.js", function() {askViewToServer();
				checkRefresh();
			})

			$(document).ready(function() {
				$('#theUser').fadeIn(3000);
			});
			var theUser;
			var usersOnDb;

		</script>
		<script id='identify'>
			document.getElementById('theUser').innerHTML += theUser + '!';

			function buildList() {
				var xmlhttp = new XMLHttpRequest();
				xmlhttp.open('GET', location.href + 'proj/list/?user=' + theUser, true)
				xmlhttp.onload = function() {
					if(xmlhttp.readyState == 4) {
						console.log(xmlhttp.response)
						document.getElementById('putlist').innerHTML = xmlhttp.response;
						//console.log(document.getElementById('example'))
						$('#example').treeview({
							collapsed : true,
							animated : "fast",
							unique : false,
						})
					}
				}
				xmlhttp.send(null)
			}

			buildList()
		</script>
		<style type="text/css">
			.CodeMirror {
				border: 1px solid #eee;
				opacity: 0;
			}
			.CodeMirror-scroll {
				height: 100%;
				overflow-y: auto;
				overflow-x: scroll;
				width: 100%;
			}
			.CodeMirror-gutter {
				background-color: #65be6a;
				border: hidden;
			}
			.CodeMirror-wrap {
				border-style: none;
			}
		</style>
	</head>
	<body id="body"   style="overflow:hidden;cursor: hand;" onkeydown="keyBinding(event); " onkeyup="alt= false" onload='setListenerForReadingFile();'  onmousedown="if(!dragIndex)setDownOnBody(event);" onmouseup="setUpOnBody(event)" onmousemove="dragBodyEvent(event)" >
		<div id="navigator" onclick="navClick()">
			<!--   fuck this damn style ! -->
			<div id="Navigator_index"  style='position:absolute; left:9px; z-index:3; top:9px;' onmouseout="setUpOnNav(event)"  onmousedown="setDownOnNav(event)" onmouseup="setUpOnNav(event)" onmousemove="dragIndexEvent(event)" ></div>
		</div>
		<div id="fs" style="left: 1214px" ondblclick="openFs()">
			<div id='theUser'>
				Welcome,
			</div>
			<div id="filelist">
				<div id="upload" onclick="document.getElementById('uploadDiv').style.display='block';" >
					Upload
				</div>
				<br>
				<br>
				<div id='putlist'></div>
			</div>
			<div id="groupcolors">
				<div id='titlecolor'>
					Group Colors
				</div>
				<br>
				<div id='colorcontainer'>
					<div id="red" onclick="changeColorRed()"></div>
					<div id="blue" onclick="changeColorBlue()"></div>
					<div id="purple" onclick="changeColorPurple()"></div>
					<div id='yellow' onclick="changeColorYellow()"></div>
					<div id='green' onclick="changeColorGreen()"></div>
				</div>
			</div>
		</div>
		<div id="uploadDiv">
			<div id="uptitle"><img id='closeicon' src='../images/close.png' alt='close' onclick='closeUploadForm()'>
			</div>
			<br>
			<br>
			<form id='form' action="/proj" method="post" enctype="multipart/form-data"  >
				<input name='myfile' id="myfile" type="file" webkitdirectory="" directory=""/>
				<input type="submit" id="submitBtn" value="Upload File" onmousedown='setupForm()'/>
				<!-- onmousedown='setupForm()'  -->
			</form>
			<input id="projname" type="text" placeholder='Project Name...' />
			<div id='foruser'>
				<input id="inputuser" type="text" placeholder='Add user...' />
				<div id='adduser' onclick='addUser()'>
					Add User
				</div>
			</div>
			<div id="userlist"></div>
		</div>
		<div id="logo">
			<img src="../images/asd.png" alt=""/>
		</div>
		<div id="chat" style="top: 793" ondblclick="openChat()">
			<div id='chatcontent'>
				<ul id='result'></ul>
			</div>
			<div id="usronline"></div>
			<input type="text" name="word" id="word" onkeyup="lookUp(event)" placeholder="Chat here..."/>
			<div id="send">
				Send
			</div>
		</div>
		<div id='newmessage'></div>
	</body>
</html>
